<template>
  <div>
    <el-drawer
      :with-header="false"
      size="75%"
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <div style="padding: 24px 24px 30px 24px">
        <el-descriptions direction="vertical" style="margin-bottom: 12px" :column="5" size="medium">
          <template slot="title">
            <div style="line-height: 30px;display: inline-block;height: 30px;">{{ data.businessName }}</div>
          </template>
          <template slot="extra">
            <el-button type="warning" size="small" @click="handleUpdate(data.id)">
              <i class="el-icon-edit"> 编辑</i>
            </el-button>
            <el-button type="danger" size="small">
              <i class="el-icon-delete"> 转移</i>
            </el-button>
            <el-dropdown style="margin-left:12px">
              <el-button size="small">
                <i class="el-icon-more"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleDelete(data.id)">
                  <i class="el-icon-sold-out"> 删除</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-descriptions-item label="客户名称">{{ data.customerName }}</el-descriptions-item>
          <el-descriptions-item label="商机金额（元）">{{ data.money }}</el-descriptions-item>
          <el-descriptions-item label="商机组">{{ data.typeName }}</el-descriptions-item>
          <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
        </el-descriptions>
        <el-scrollbar style="height: calc(100vh - 225px)">
          <el-tabs v-model="activeName" @tab-click="tabClick">
<!--            <el-tab-pane label="活动" name="activity">-->
<!--              <crm-edit></crm-edit>-->

<!--            </el-tab-pane>-->
            <el-tab-pane label="详细资料" name="detailInfo">
              <el-descriptions title="基本信息" :column="2">
                <el-descriptions-item label="商机名称">{{ data.businessName }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{ data.customerName }}</el-descriptions-item>
                <el-descriptions-item label="商机状态组">{{ data.typeName }}</el-descriptions-item>
                <el-descriptions-item label="商机阶段">{{ data.statusName }}</el-descriptions-item>
                <el-descriptions-item label="商机金额（元）">{{ data.money }}</el-descriptions-item>
                <el-descriptions-item label="预计成交日期">{{ data.dealDate }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ data.remark }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="系统信息" :column="2" style="margin-top: 20px">
                <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ data.createUserName }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
                <el-descriptions-item label="最后跟进时间">{{ data.lastTime }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="产品" name="product">
              <product-drawer-table v-if="activeName == 'product'" :product-data="drawerTableData"
                                    :loading="drawerTableLoading"
              />
            </el-tab-pane>
            <el-tab-pane label="合同" name="contract">
              <contract-drawer-table v-if="activeName == 'contract'" :contract-data="drawerTableData"
                                     :loading="drawerTableLoading"
              />
            </el-tab-pane>
            <el-tab-pane label="附件" name="file">
              <file-drawer-table v-if="activeName == 'file'" :file-list="drawerTableData"
                                 :loading="drawerTableLoading"
              />
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="records">
              <crm-records :activity-list="drawerTableData" v-if="activeName == 'records'"/>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </el-drawer>
    <!-- 编辑对话框 -->
    <business-dialog :visible.sync="dialogVisible" :pk="pk"/>
  </div>
</template>

<script>
import {
  deleteBatchByIds,
  listContractFromBusiness,
  listProductFromBusiness,
  selectByPrimaryKey
} from '@/api/crm/Business'
import { listActionRecord } from '@/api/crm/ActionRecord'

import CrmEdit from '@/components/CrmEdit/Index'
import ProductDrawerTable from '@/components/Crm/Product/DrawerTable'
import ContractDrawerTable from '@/components/Crm/Contract/DrawerTable'
import BusinessDialog from './Create'
import FileDrawerTable from '@/components/Crm/File/DrawerTable'
import CrmRecords from '@/components/CrmRecords/Index'

export default {
  inheritAttrs: false,
  name: 'BusinessDrawer',
  components: {
    CrmEdit,
    ProductDrawerTable,
    ContractDrawerTable,
    FileDrawerTable,
    BusinessDialog,
    CrmRecords
  },
  props: {
    pk: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      drawerVisible: false, // 抽屉懒加载
      dialogVisible: false, // 对话框懒加载
      data: {}, // 对象数据
      activeName: 'detailInfo', // 标签页标志
      drawerTableLoading: false, // 抽屉表格加载动画
      drawerTableData: [], // 抽屉表格数据
      queryParams: {
        page: 1,
        limit: 15,
        searchId: null
      } // 查询对象
    }
  },
  // 在实例创建完成后被立即调用
  created() {
  },
  // 实例被挂在后调用
  mounted() {
  },
  // 方法
  methods: {
    // 抽屉打开方法
    onOpen() {
      if (this.pk != null) {
        selectByPrimaryKey(this.pk).then(res => {
          this.data = res.data
        })
      }
    },
    // 抽屉关闭回调
    onClose() {
      this.activeName = 'detailInfo'
      this.data = {
        businessName: ''
      }
      this.$emit('update:visible', false)
    },
    // 标签页切换事件
    tabClick({ name }) {
      this.queryParams.searchId = this.data.id
      this.drawerTableLoading = true
      this.drawerTableData = []
      if (name == 'contract') {
        // 查询商机下关联合同
        listContractFromBusiness(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'product') {
        // 查询商机下关联产品
        listProductFromBusiness(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'records') {
        listActionRecord(3, this.data.id).then(res => {
          this.drawerTableData = res.data
        })
      }
    },
    // 删除
    handleDelete(id) {
      this.$modal.confirm('确认删除所选中数据?').then(function() {
        return deleteBatchByIds(id)
      }).then(() => {
        this.$emit('ok')
        this.onClose()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    // 编辑
    handleUpdate() {
      this.pk = this.data.id
      this.dialogVisible = true
    },
    // 抽屉关闭回调
    handleClose() {
      this.activeName = 'detailInfo'
      this.drawerTableData = []
      this.queryParams = {
        page: 1,
        limit: 15,
        searchId: null
      }
    }
  }
}
</script>


